<template>
  <div>
    <n-modal v-model:show="showModal" :mask-closable="false">
       <div class="modal-wrapper">
        <div class="modal-wrapper-header">
          <div style="width: 3rem;"></div>
          <div class="title">{{ title }}</div>
          <div style="width: 3rem; margin-right: 0.7rem; margin-top: 0.7rem;" @click="close">
            <img src="/src/assets/login/UI_Common_Btn_Close.png" style="width: 2.8rem; height: auto; display: block;" />
          </div>
        </div>
        <div class="modal-wrapper-content">
          <slot></slot>
        </div>
       </div>
    </n-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '弹窗'
  }
})

const showModal = ref(false)

function show() {
  showModal.value = true
}

function close() {
  showModal.value = false
}

defineExpose({
  show,
  close
})
</script>

<style lang="scss" scoped>
.modal-wrapper {
  width: 48rem;
  height: auto;

  &-header {
    height: 6rem;
    width: 100%;
    background: url('/src/assets/login/UI_Common_Window_Bg2.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>div {
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 1;
    }
  }

  &-content {
    width: 100%;
    min-height: 14rem;
    max-height: 80rem;
    background: linear-gradient(180deg, #ffffff 40%, #c1dafb 100%);
    margin-top: -1px;
    border-radius: 0 0 5px 5px;
  }
}

.title {
  font-size: 2.6rem;
  color: #ffffff;
  font-weight: bold;
  line-height: 6rem;
  flex: 1 !important;
  text-align: center;
  margin-top: 0.5rem;
}
</style>